<template>
  <div class="statistics">
    <div class="data-overview">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-card>
            <a-statistic
              title="总小说数"
              :value="overview.novelCount"
              :precision="0"
            >
              <template #prefix>
                <a-icon type="book" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card>
            <a-statistic
              title="总作者数"
              :value="overview.authorCount"
              :precision="0"
            >
              <template #prefix>
                <a-icon type="user" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card>
            <a-statistic
              title="总章节数"
              :value="overview.chapterCount"
              :precision="0"
            >
              <template #prefix>
                <a-icon type="file-text" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card>
            <a-statistic
              title="总评论数"
              :value="overview.commentCount"
              :precision="0"
            >
              <template #prefix>
                <a-icon type="message" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <div class="charts-container">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-card title="小说分类统计">
            <div ref="categoryChart" style="height: 300px"></div>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="每月新增小说">
            <div ref="trendChart" style="height: 300px"></div>
          </a-card>
        </a-col>
      </a-row>
      <a-row :gutter="16" style="margin-top: 16px">
        <a-col :span="12">
          <a-card title="作者发文量排行">
            <div ref="authorChart" style="height: 300px"></div>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="用户阅读时段分布">
            <div ref="readTimeChart" style="height: 300px"></div>
          </a-card>
        </a-col>
      </a-row>
      <a-row :gutter="16" style="margin-top: 16px">
        <a-col :span="12">
          <a-card title="评论数量趋势">
            <div ref="commentChart" style="height: 300px"></div>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="热门小说Top10">
            <a-table
              :columns="hotNovelColumns"
              :data-source="hotNovelList"
              :pagination="false"
              :row-key="record => record.title"
            >
              <template #index="{ index }">
                <span :class="['rank', index < 3 ? 'top' + (index + 1) : '']">{{ index + 1 }}</span>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import { PieChart, LineChart, BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  PieChart,
  LineChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  CanvasRenderer
])

export default {
  name: 'NovelStatistics',
  data() {
    return {
      overview: {
        novelCount: 0,
        authorCount: 0,
        chapterCount: 0,
        commentCount: 0
      },
      hotNovelColumns: [
        {
          title: '排名',
          scopedSlots: { customRender: 'index' },
          width: 80
        },
        {
          title: '小说名称',
          dataIndex: 'title'
        },
        {
          title: '作者',
          dataIndex: 'author'
        },
        {
          title: '分类',
          dataIndex: 'category'
        },
        {
          title: '阅读量',
          dataIndex: 'readCount'
        },
        {
          title: '收藏量',
          dataIndex: 'favoriteCount'
        }
      ],
      hotNovelList: [],
      categoryChart: null,
      trendChart: null,
      authorChart: null,
      readTimeChart: null,
      commentChart: null
    }
  },
  mounted() {
    this.initCharts()
    this.fetchData()
  },
  beforeDestroy() {
    // 销毁图表实例
    [
      this.categoryChart,
      this.trendChart,
      this.authorChart,
      this.readTimeChart,
      this.commentChart
    ].forEach(chart => {
      if (chart) {
        chart.dispose()
      }
    })
  },
  methods: {
    initCharts() {
      // 初始化所有图表
      this.categoryChart = echarts.init(this.$refs.categoryChart)
      this.trendChart = echarts.init(this.$refs.trendChart)
      this.authorChart = echarts.init(this.$refs.authorChart)
      this.readTimeChart = echarts.init(this.$refs.readTimeChart)
      this.commentChart = echarts.init(this.$refs.commentChart)

      // 监听窗口大小变化，调整图表大小
      window.addEventListener('resize', this.handleResize)
    },
    handleResize() {
      // 调整所有图表大小
      [
        this.categoryChart,
        this.trendChart,
        this.authorChart,
        this.readTimeChart,
        this.commentChart
      ].forEach(chart => {
        if (chart) {
          chart.resize()
        }
      })
    },
    async fetchData() {
      try {
        // TODO: 调用API获取统计数据
        // const res = await this.$api.novel.getStatistics()
        // this.overview = res.data.overview
        // this.hotNovelList = res.data.hotNovels
        // this.updateCharts(res.data)

        // 使用模拟数据进行展示
        this.overview = {
          novelCount: 1234,
          authorCount: 456,
          chapterCount: 78900,
          commentCount: 5678
        }
        this.hotNovelList = this.getMockHotNovels()
        this.updateCharts(this.getMockData())
      } catch (error) {
        this.$message.error('获取统计数据失败')
      }
    },
    updateCharts(data) {
      // 更新分类统计饼图
      this.categoryChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: ['玄幻', '武侠', '都市', '科幻', '其他']
        },
        series: [
          {
            name: '小说分类',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: '玄幻' },
              { value: 310, name: '武侠' },
              { value: 234, name: '都市' },
              { value: 135, name: '科幻' },
              { value: 148, name: '其他' }
            ]
          }
        ]
      })

      // 更新每月新增小说趋势图
      this.trendChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '新增小说',
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 2,
              color: '#409EFF'
            },
            data: [10, 15, 8, 25, 20, 30]
          }
        ]
      })

      // 更新作者发文量排行图
      this.authorChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['作者A', '作者B', '作者C', '作者D', '作者E']
        },
        series: [
          {
            name: '发文量',
            type: 'bar',
            itemStyle: {
              color: '#67C23A'
            },
            data: [120, 100, 80, 70, 60]
          }
        ]
      })

      // 更新用户阅读时段分布图
      this.readTimeChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['0-2', '2-4', '4-6', '6-8', '8-10', '10-12', '12-14', '14-16', '16-18', '18-20', '20-22', '22-24']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '阅读人数',
            type: 'line',
            smooth: true,
            areaStyle: {
              color: '#E6A23C',
              opacity: 0.3
            },
            lineStyle: {
              color: '#E6A23C'
            },
            data: [320, 120, 50, 180, 410, 380, 420, 450, 520, 680, 780, 480]
          }
        ]
      })

      // 更新评论数量趋势图
      this.commentChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '评论数',
            type: 'line',
            lineStyle: {
              color: '#F56C6C'
            },
            data: [150, 230, 224, 218, 135, 147, 260]
          }
        ]
      })
    },
    getMockHotNovels() {
      return [
        { title: '斗破苍穹', author: '天蚕土豆', category: '玄幻', readCount: 1000000, favoriteCount: 50000 },
        { title: '诛仙', author: '萧鼎', category: '仙侠', readCount: 900000, favoriteCount: 45000 },
        { title: '武动乾坤', author: '天蚕土豆', category: '玄幻', readCount: 800000, favoriteCount: 40000 },
        { title: '大主宰', author: '天蚕土豆', category: '玄幻', readCount: 700000, favoriteCount: 35000 },
        { title: '凡人修仙传', author: '忘语', category: '仙侠', readCount: 600000, favoriteCount: 30000 }
      ]
    },
    getMockData() {
      // 返回模拟的统计数据
      return {
        categories: ['玄幻', '武侠', '都市', '科幻', '其他'],
        categoryData: [335, 310, 234, 135, 148],
        monthlyData: [10, 15, 8, 25, 20, 30],
        // ... 其他模拟数据
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.statistics {
  padding: 24px;

  .data-overview {
    margin-bottom: 24px;
  }

  .charts-container {
    .rank {
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 50%;
      background: #f0f0f0;

      &.top1 {
        background: #ffd700;
        color: #fff;
      }
      &.top2 {
        background: #c0c0c0;
        color: #fff;
      }
      &.top3 {
        background: #cd7f32;
        color: #fff;
      }
    }
  }
}
</style> 